<ti-date-dominator
  #dominator
  [id]="appendId('dominator')"
  type="range"
  [format]="format"
  [disabled]="disabled"
  [clearable]="clearIcon"
  [(ngModel)]="inputValue"
  (clear)="onIconClearClick($event)"
  (click)="onShowClick()"
  >{{placeholder}}</ti-date-dominator
><!-- 分割线是特殊字符制表符，不是普通中线 -->
<ti-drop
  #drop
  class="ti3-date-range-picker"
  [ngClass]="{'ti3-date-range-customize': hasCustomizeTime}"
  [dominatorElem]="dominatorCom.nativeElement"
  fixMaxHeight="true"
  [panelWidth]="datePanelWidth"
  [panelAlign]="panelAlign"
  [browserSpace]="browserSpace"
  [dominatorSpace]="dominatorSpace"
  [determinPositionFn]="determinPositionFn"
  theme="noborder"
  [id]="appendId('drop')"
>
  <section class="ti3-date-clear">
    <section *ngIf="hasCustomizeTime" class="ti3-date-range-customize-container">
      <ng-container *ngTemplateOutlet="customizeTemplate; context:  {$implicit: customizeOptions}"></ng-container>
    </section>

    <section style="float: right">
      <section class="ti3-date-edit-container">
        <ti-date-edit
          class="ti3-date-range-edit"
          [ngClass]="{'ti3-date-range-begin-edit': focusedPosition === 'begin'}"
          [(ngModel)]="datePanel.value.begin"
          [min]="datePanel.min"
          [max]="datePanel.max"
          (click)="dateEditClick('begin')"
          [disabled]="isBeginFixed"
          [disabledDays]="disabledDays"
          (inputChange)="onInputChange()"
          (focus)="dateEditFocus('begin')"
          (blur)="dateEditBlur('begin')"
          (keydown)="onKeydownFn($event, 'begin')"
          [format]="datePanel.format"
          [id]="appendId('begin_edit')"
        ></ti-date-edit>
        <span class="ti3-date-range-splitline"> ─ </span>
        <ti-date-edit
          class="ti3-date-range-edit"
          [ngClass]="{'ti3-date-range-end-edit': focusedPosition === 'end'}"
          [(ngModel)]="datePanel.value.end"
          [min]="datePanel.min"
          [max]="datePanel.max"
          [isEndValue]="true"
          [disabledDays]="disabledDays"
          [disabled]="isEndFixed"
          (inputChange)="onInputChange()"
          (focus)="dateEditFocus('end')"
          (blur)="dateEditBlur('end')"
          (keydown)="onKeydownFn($event, 'end')"
          (click)="dateEditClick('end')"
          [format]="datePanel.format"
          [id]="appendId('end_edit')"
        ></ti-date-edit>
        <!-- 确认按钮禁用场景下，结束框输入之后无法直接tab切换焦点至确认按钮，故添加此过度input -->
        <input #input type="text" class="ti3-tab-input" />
      </section>
      <ti-date-panel
        [id]="appendId('begin-panel')"
        [(value)]="datePanel.value"
        [focusedPosition]="focusedPosition"
        [(picker)]="datePanel.picker"
        [isRange]="true"
        [disabledDays]="disabledDays"
        [isBeginFixed]="isBeginFixed"
        [isEndFixed]="isEndFixed"
        [isInputValue]="isInputValue"
        (select)="datePanel.select()"
        [min]="datePanel.min"
        [max]="datePanel.max"
        [format]="datePanel.format"
        [nowDateTime]="nowDateTime"
      ></ti-date-panel>
    </section>
  </section>
  <section class="ti3-date-picker-footer-right">
    <button
      class="ti3-date-picker-footer-btn"
      [id]="appendId('okBtn')"
      label="ok"
      type="button"
      size="small"
      (click)="onOkClick()"
      tiButton
    ></button>
  </section>
</ti-drop>
<ng-template #customizeTemplate let-options>
  <ul [id]="appendId('list')">
    <li
      *ngFor="let option of options; index as i;"
      class="ti3-customize-time-label"
      (click)="customizeTimeClickFn(option.value)"
      [id]="appendId('label_' + i)"
    >
      {{option.label}}
    </li>
  </ul>
</ng-template>
